<template>
  <div class="list-todos">  <!--菜单容器-->
      <a  class="list-todo activeListClass list"  v-for="item in items" :key="item"  @click="goList(item.id)" :class="{'active':item.id===todoId}"> <!--单个菜单容器-->
        <span class="icon-lock" v-if="item.locked"></span>  <!--锁的图标-->
        <span class="count-list" v-if="item.count>0">{{item.count}}</span><!--数字-->
        {{item.title}} <!-- 数据绑定，看模板语法-->
      </a>
    <a class=" link-list-new" @click="addTodoList"> <!--新增菜单-->
      <span class="icon-plus">
      </span>
      新增
    </a>
  </div>
</template>
<script>
import { getTodoList,addTodo } from "../api/api"; 
  export default {
    data(){//data函数
        return {
            items:[],
            todoId:''
        };
    },
    created(){
        getTodoList({}).then(res => {
            const TODOS = res.data.todos;
            this.items = TODOS;
            this.todoId = TODOS[0].id;
        })
    },
    methods:{
        goList(id){
            this.todoId = id;
        },
        addTodoList(){
            addTodo({}).then(data => {
                getTodoList({}).then(res => {
                    const TODOS = res.data.todos;
                    this.todoId = TODOS[TODOS.length-1].id;
                    this.items = TODOS;
                })
            })
        }
    }
  };
</script>
<style lang="less">
@import '../common/style/menu.less';
</style>